<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view class="margin-top-xs">
			<view class="save" style="flex-wrap: wrap;">
				<view style="width:100%">
					<a class="om-btn fr" @click="restoreDefaultSort">恢复默认排序</a>
					<a class="om-btn fr" @click="save">保存</a>
				</view>
				<view style="width:100%"><span class="fl">(上下拖动应用名称右侧图标进行排序)</span></view>
			</view>
			<view class="content" style="margin-top: 75px;">
				<!-- 当前属性设置 isLongTouch关闭长按拖动 isAutoScroll开启自动滚动 feedbackGeneratorState开启触感反馈 rowHeight行高55 -->
				<ot-HM-dragSorts :list="applyList" :isLongTouch="false" :isAutoScroll="true" :feedbackGeneratorState="true"  :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick" >
					<template slot="rowContent" slot-scope="{ row }">
						<view class="row">
							<image v-if="row.iconCls" class="icon" :src="'/static' + row.iconCls"></image>
							<text class="text">{{row.text}}</text>
						</view>
					</template>
				</ot-HM-dragSorts>
			</view>
		</view>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '应用排序',
				groupId: '',
				applyList: [],
				applySort: []
			};
		},
		methods: {
			onclick(e){
				// console.log('=== onclick start ===');
				// console.log("被点击行: " + JSON.stringify(e.value));
				// console.log("被点击下标: " + JSON.stringify(e.index));
				// console.log('=== onclick end ===');
			},
			change(e){
				// console.log('=== change start ===');
				// console.log("被拖动行: " + JSON.stringify(e.moveRow));
				// console.log('原始下标：',e.index);
				// console.log('移动到：',e.moveTo);
				// console.log('=== change end ===');
			},
			confirm(e){
				// console.log('=== confirm start ===');
				// console.log("被拖动行: " + JSON.stringify(e.moveRow));
				// console.log('原始下标：',e.index);
				// console.log('移动到：',e.moveTo);
				// console.log('=== confirm end ===');
				let data1 = this.applySort[e.index]
				let data2 = this.applySort[e.moveTo]
				this.applySort[e.index] = data2
				this.applySort[e.moveTo] = data1
			},
			save(){
				let _that = this
				_that.om.request('wxNewGroupMenu/saveAppSort',{
					groupId: _that.groupId,
					appIds: _that.applySort.join(",")
				},'post').then(res => {
					if (res.succeed) {
						uni.navigateBack()
					}else{
						_that.om.toast(res.msg);
					}
				});
			},
			getApplyList(){
				let _that = this
				_that.om.request('wxNewGroupMenu/getAppList', {
					groupId: _that.groupId
				}).then(res => {
					if (res.succeed) {
						let d= res.value;
						_that.applyList = d.menuList
						_that.applySort = _that.applyList.map(e=>e.id)
					}
				});
			},
			restoreDefaultSort(){
				let _that = this
				_that.om.request('wxNewGroupMenu/doRestoreAppSort', {
					groupId: _that.groupId
				},'POST').then(res => {
					if (res.succeed) {
						_that.getApplyList()
					}
				});
			}
		},
		onLoad(e) {
			this.groupId = e.groupId
			this.getApplyList()
		},
	};
</script>

<style lang="scss" scoped>
	.save{
		position: fixed;
		top: 0;
		display: flex;
		z-index: 99;
		width: 100%;
		padding: 5px 3px;
		border-bottom: 1px solid #c8c7cc;
		background: #FFF;
		span{
			margin-left: 12px;
			font-size: 14px;
			line-height: 24px;
		}
	}
	.content {
		.row{
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon{
				width: 30px;
				height: 30px;
				border-radius: 6px;
				margin-right: 13px;
			}
			.text{
				font-size: 13px;
			}
		}
	}
</style>
